Skip to main content

Adding Font loading

Let's add a custom font to our application.

First, update the server/document.js file to include Google Fonts:

import React from "react";
import { Head, Body } from "catalyst-core";

function Document(props) {
    return (
        <html lang="en">
            <Head {...props}>
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet" />
            </Head>
            <Body {...props} />
        </html>
    );
}

export default Document;

Now, update the CSS to use this font:

/* Add to src/static/css/base/pet-styles.css */

body {
  font-family: 'Poppins', Arial, sans-serif;
  /* other styles remain the same */
}

This will apply the Poppins font to all text in our application, giving it a more modern and polished look.